import React from 'react';
import { View, Image, Text, StyleSheet, TouchableOpacity} from 'react-native';
import { Card } from '@ant-design/react-native';

interface SceneCardProps {
    image: string | number;
    title: string;
    onAddPress?: () => void;
    enabled?: boolean;
}

export const SceneCard: React.FC<SceneCardProps> = ({ image, title, onAddPress, enabled }) => {
    return (
        <View>
            <Card style={styles.card}>
                <View style={styles.imageWrapper}>
                    <Image
                        source={typeof image === 'string' ? { uri: image } : image}
                        style={styles.image}
                        resizeMode="cover"
                    />
                </View>
                {/* 覆盖内容层 */}
                <View style={styles.overlay}>
                    <Text style={styles.title}>{title}</Text>
                    <TouchableOpacity
                        style={styles.button}
                        onPress={onAddPress}
                        activeOpacity={0.7}
                    >
                        {enabled ? (
                            <Text style={styles.buttonText}>当前</Text>
                        ) : (
                            <Text style={styles.buttonText}>切换</Text>
                        )}
                    </TouchableOpacity>
                </View>
            </Card>
        </View>
    );
};

const styles = StyleSheet.create({
    card: {
        width: 200,
        height: 100,
        // borderRadius: 12,
        overflow: 'hidden',
        backgroundColor: '#fff',
    },
    imageWrapper: {
        width: 200,
        height: 100,
        // borderRadius: 12,
        overflow: 'hidden',
        position: 'relative',
    },
    image: {
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
    },
    overlay: {
        position: 'absolute',
        left: 0,
        top: 0,
        width: '100%',
        height: '100%',
        justifyContent: 'center',
        marginLeft: 16,
    },
    title: {
        color: '#000',
        fontSize: 18,
        fontWeight: 'bold',
        textShadowColor: 'rgba(255, 255, 255, 0.3)',
        textShadowOffset: { width: 1, height: 1 },
        textShadowRadius: 2,
        marginBottom: 8,
    },
    button: {
        backgroundColor: 'rgba(237, 231, 231, 0.85)',
        paddingHorizontal: 16,
        paddingVertical: 4,
        borderRadius: 8,
        width: 65,
        height: 40,
        justifyContent: 'center',
    },
    buttonText: {
        color: '#3366cc',
        fontSize: 14,
        fontWeight: 'bold',
    },
});